<template>
  <div class="home">
    test
    <div ref="main" style="height:400px;"></div>
    <!-- 创建容器 -->
    <!-- <button @click="changeTheme">切换主题</button> -->
  </div>
</template>

<script>
import * as echarts from 'echarts'
// 引入E-charts
export default {

  data () {
    return {
      myChart: null
    }
  },
  created () {
    this.getData()
      .then(res => {
        this.myChart.setOption(res)
      })
  },
  mounted () {
    this.init()
  },
  methods: {
    // 请求得到的数据，在原数据的基础上做出改变
    getData () {
      const p = new Promise((resolve, reject) => {
        setTimeout(() => {
          // 定时器：三秒后，得到模拟请求的新数据
          const option = {
            xAxis: {
              type: 'category',
              data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
            },
            yAxis: {},
            series: [
              {
                type: 'bar',
                name: '2015',
                data: [49.3, 42.1, 44.4, 45.4]
              },
              {
                type: 'bar',
                name: '2016',
                data: [25.8, 59.4, 71.2, 76.9]
              },
              {
                type: 'bar',
                name: '2017',
                data: [57.7, 73.1, 72.5, 78.1]
              }
            ]
          }
          resolve(option)
        }, 3000)
      })
      return p
    },
    // 原有的写好的数据，刷新即最先显示的数据，等待请求数据得到后实时更新
    init () {
      // 初始化echarts实例
      this.myChart = echarts.init(this.$refs.main, 'light')

      const option = { // 设置配置项
        xAxis: {
          type: 'category',
          data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
        },
        yAxis: {},
        series: [
          {
            type: 'bar',
            // 全局调色盘。
            color: [
              '#c23531',
              '#2f4554',
              '#61a0a8',
              '#d48265',
              '#91c7ae',
              '#749f83',
              '#ca8622',
              '#bda29a',
              '#6e7074',
              '#546570',
              '#c4ccd3'
            ],
            name: '2015',
            data: [89.3, 92.1, 94.4, 85.4]
          },
          {
            type: 'bar',
            name: '2016',
            data: [95.8, 89.4, 91.2, 76.9]
          },
          {
            type: 'bar',
            name: '2017',
            data: [97.7, 83.1, 92.5, 78.1]
          }
        ]
      }

      // window.addEventListener('resize', function () {
      //   this.myChart.resize()
      // })
      // 上边是用来监听容器的size，用于随着浏览器的尺寸 随时改变容器的尺寸

      // 绘制图表，将配置项设置给E-charts实例对象
      this.myChart.setOption(option)
    }
  }
  // 切换主题方法
  // changeTheme () {
  //   // 切换主题为 light 或 dark
  //   this.theme = this.theme === 'dark' ? 'light' : 'dark'
  //   // 重新初始化 echarts 图表，并设置主题
  //   this.myChart.dispose()
  //   this.myChart = echarts.init(this.$refs.main, this.theme)
  // }
}

</script>

<style scope>
.home {
  background-color: white;
  height: 100%;
}
div#main{
  /* background-color: skyblue;; */
}
</style>
